<%@page import="cn.jsj.hzu.qm.facecloud.ciuser.pojo.Cilab"%>
<%@page import="cn.jsj.hzu.qm.facecloud.ciuser.pojo.Ciuser"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%
Ciuser ciuser = (Ciuser) request.getSession().getAttribute("ciuser");
if (ciuser == null) {
	response.sendRedirect("../errorPage/toLoginErrorPage.html");
	return;
}

Cilab cilab = (Cilab)request.getAttribute("cilab");
if(cilab == null){
	response.sendError(568, "noCilab");
	return;
}else{
	pageContext.setAttribute("cilab", cilab);
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>No Login Data</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>login successfully</title>
<link rel="stylesheet" href="../css/style.default.css" type="text/css" />
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../js/baseServerLink.js" type="text/javascript"
	charset="utf-8"></script>

<style>
.redAlert {
	color: red;
	animation: twinkle 1s infinite alternate;
}

.greenAlert {
	color: green;
}
</style>
<!-- 表格的样式 -->
<style>
/* td:nth-child(1) {
	text-align: right;
	width: 40%;
}
*/
td:nth-child(2) {
	text-align: left;
	width: 60%;
} 
</style>




<style type="text/css">

.my_green_button {
	background-color: #95f04b;
	border: 0;
	border-radius: 20px;
	-moz-border-radius: 20px;
	/* 老的 Firefox */
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #5c8f30;
	border: 1px solid #6eac3a;
}

td>a{
	color: blue ;
	text-decoration: underline;
}

input{
	height: 25px;
	border: 1px solid #dddddd;
	text-align: center;
	color: dimgray;
}
</style>

<script type="text/javascript">
	/*修改时的加粗和变黑、保存按钮的控制*/
	
	function setSaveAvailable(id){
		jQuery("#nochange_"+id).hide();
		jQuery("#save_"+id).show();
	}

	function setInputBold(id){
		jQuery("#"+id).css("font-weight", "bold");
		jQuery("#"+id).css("color", "black");
	}
	
//===================================================================================
	/*
	<tr class="vartr">
		<td>2021年7月15日10:19:43</td>
		<td style="text-align: center;">检查记录</td>
		<td>负责人</td>
		
	</tr>
	*/
	function addLine(col1, col2, col3, col4){ 
		var $vartr = jQuery("<tr class=\"vartr\"></tr>");
		
		$vartr.append("<td>"+col1+"</td>");
		$vartr.append("<td>"+col2+"</td>");
		$vartr.append("<td>"+col3+"</td>");
		$vartr.append("<td>"+col4+"</td>");
		
		jQuery("#my_tbody").append($vartr);
	}
	
	
	function loadTable(){
		queryStudent();
	}
	
	
	
	jQuery(function(){
		loadTable();
	
			//刷新事件
			
			jQuery("#reload").click(function(){
				loadTable();
			});
			
			
			//关于新增条目的展示和隐藏
			jQuery("#button_new").show();
			jQuery("#table_now").show();
			jQuery("#table_new").hide();
			jQuery("#no_new").hide();
			
			
			jQuery("#button_new").click(function(){
				jQuery("#button_new").hide();
				// jQuery("#table_now").hide();
				jQuery("#table_new").show();
				jQuery("#no_new").show();
			})
			
			jQuery("#no_new").click(function(){
				jQuery("#button_new").show();
				jQuery("#table_now").show();
				jQuery("#table_new").hide();
				jQuery("#no_new").hide();
				jQuery("#text_new").val("");
				loadTable();
			});
			
			//默认内容，点了标题就有
			jQuery("#titleaddnormal").click(function(){
				jQuery("#text_new").val("正常");
			});
		});
		
	</script>
</head>

<body>
	<div class="bodywrapper" id="my_title">
		<div class="topheader orangeborderbottom5">
			<div class="left">
				<h1 class="logo">
					签到<span>系统</span>
				</h1>



				<br clear="all" />

			</div>
			<!--left-->

			<div class="right">

				<!--userdata-->
			</div>
			<!--userinfodrop-->
		</div>
		<!--right-->
	</div>
	<!--topheader-->

	<div class="" style="">
		<div class="contentwrapper padding10"
			style="margin: 0 auto; width: 80%; text-align: center;">
			<div class="errorwrapper error403" style="">
				<div class="errorcontent">
					<br />
					<h1>实验室安全检查单</h1>
					<h3>当前实验室</h3>
					<br>
					<h2><%=cilab.getName() %></h2>
					<br/>
					<div style="text-align: left;">
						<button id="button_new" type="button" class="my_green_button">
							<span style="line-height: 30px;">
								<span style="color: white; font-size: larger;">
									&nbsp;&nbsp;(+)
								</span>
								新增记录&nbsp;&nbsp;
							</span>
						</button>
						
						<button id="no_new" type="button" class="my_green_button" style="background-color: orangered; display: none;">
							<span style="line-height: 30px;">
								<span style="color: white; font-size: larger;">
									&nbsp;&nbsp;(x) 
								</span>
								<span style="color: white;">取消新增&nbsp;&nbsp;</span>
							</span>
						</button>
						<a id="reload" href="javaScript:;" class="btn btn2 btn_blue btn_search radius50">
							<span>重新查询列表</span>
						</a>
					</div>
					
					
					
					
					<table cellpadding="0" cellspacing="0" border="0" class="stdtable" style="text-align: center;" id="table_new">
						<colgroup>
							<col class="con0" />
							<col class="con1" />
						</colgroup>
						<thead>
							<tr>
								<th class="head1" style="text-align: center; background-color: palegreen;" title="正常" id="titleaddnormal">新增记录</th>
								<th class="head0" style="text-align: center; background-color: palegreen;">操作</th>
							</tr>
						</thead>
						<tbody>
							<tr >
								<td>
									<input type="text" id="text_new" placeholder="请输入检查记录" style="width: 100%;"/>
								</td>
								
								<td style="width: 15%; text-align: center;"><a href="javascript:;" id="save_add" style=>提交</a></td>
							</tr>
					
						</tbody>
						
						
					</table>
					<div style="text-align: left;">
						
						<span>每页：
							<select id="perpage">
								<option value="1">1【测试】</option>
								<option value="2">2【测试】</option>
								<option value="3">3</option>
								<option value="5" selected>5</option>
								<option value="10">10</option>
								<option value="50">50</option>
							</select>
							项</span>，共 <span id="allnum">-1</span>项；
						第 <input id="nowpage" value="-1" style="width:30px;" /> 页(<button id="jumpto">跳转</button>)，共
						<span id="allpage">-1</span>页
						<button id="bt_pre">上一页</button>
						<button id="bt_next">下一页</button>
						<br />
						（此表数据最后一次刷新于：
						<span id="reload_date2">
							-
						</span>
						）<span id="id_user_num2">共查询到 - 条记录</span>
					</div>
					
					
					<script>
						
						
						function getCilabrecordCount(){
							jQuery.ajax({
								url:'../CilabrecordServlet',
								type:'POST',
								data:{
									mode:'41'
								},
								success:function(message){
									eval("message="+message);
									jQuery("#allnum").text(message[0]);
								},
								error:function(message){
									console.log(message);
									console.log("sumerror:服务器访问异常"+message);
								}
							});
						}
						
						//查询签到记录
						//这样的名字是为了适配已经写好的分页查询检查合法性的函数
						function queryStudent(){
							//删掉表中之前的信息
							$vartr = jQuery(".vartr");
							for (var i = 0; i < $vartr.length; i++) {
								$vartr.remove();
							}
							
							jQuery.ajax({
								url:'../CilabrecordServlet',
								type:'POST',
								data: {
									'mode': 42,
									'page':jQuery("#nowpage").val(),
									'perpage':jQuery("#perpage").val()
								},
								success:function(message){
									console.log(message)
									eval("message="+message);
									for(var i = 0; i < message.length; i++){
										addLine(
											message[i]['recorddate'], 
											message[i]['labname'],
											message[i]['record'],
											message[i]['who'],
										);
									}
								},
								error:function(message){
									console.log(message);
									console.log("queryerror:服务器访问异常"+message);
								}
							
							});
						}
						
						//######################## 分页查询的初始化-开始 ########################*/
						jQuery("#nowpage").val(1);
						getCilabrecordCount();
						
						//上一页
						jQuery("#bt_pre").click(function() {
							if (eval(jQuery("#nowpage").val()) <= 1) {
								jQuery("#nowpage").val(1);
								alert("已经是第一页！");
							} else {
								jQuery("#nowpage").val(jQuery("#nowpage").val() - 1);
								queryStudent();
							}
						});
						
						
						
						//下一页
						console.log(eval(jQuery("#nowpage").val()));
						console.log(eval(jQuery("#nowpage").val()));
						
						jQuery("#bt_next").click(function() {
							console.log(jQuery("#nowpage").val());
							console.log(jQuery("#allpage").text())
							if (eval(jQuery("#nowpage").val()) >= eval(jQuery("#allpage").text())) {
								jQuery("#nowpage").val(jQuery("#allpage").text());
								alert("已经是最后页！");
							} else {
								jQuery("#nowpage").val(eval(jQuery("#nowpage").val()) + 1);
								queryStudent();
							}
						
						});
						
						jQuery("#perpage").change(function(){
							getAllvCiciNum();
							
							if(eval(jQuery('#nowpage').val()) > eval(jQuery("#allpage").text())){
								jQuery('#nowpage').val(jQuery("#allpage").text());
							}
							if(eval(jQuery('#nowpage').val()) < 1){
								jQuery('#nowpage').val("1")
							}
							
							queryStudent();
						});
						//queryStudent();
						
						jQuery("#jumpto").click(queryStudent);
						//######################## 分页查询的初始化-结束 ########################*/
						
					</script>
					
					<table cellpadding="0" cellspacing="0" border="0" class="stdtable" style="text-align: center;" id="table_now">
						<colgroup>
							<col class="con1" />
							<col class="con1" />
							<col class="con1" />
						</colgroup>
						<thead>
							<tr>
								<th class="head1" style="text-align: center;">日期</th>
								<th class="head1" style="text-align: center;">实验室</th>
								<th class="head1" style="text-align: center;">实验室检查记录</th>
								<th class="head1" style="text-align: center;">记录负责人</th>
							</tr>
						</thead>
						<tbody id="my_tbody">
							<tr class="vartr">
								<td>2021年7月15日10:19:43</td>
								<td style="text-align: center;">检查记录</td>
								<td>负责人</td>
								
							</tr>
					
							<tr class="vartr">
								<td style="text-align: center;"> 李四 </td>
								<td>789@qq.com</td>
								<td>8</td>
							</tr>
						</tbody>
					</table>
					
					
					
					<script type="text/javascript">
						jQuery(function(){
							jQuery("#save_add").click(function(){
								jQuery.ajax({
									//jsp
									url:"../CilabrecordServlet",
									type:"POST",
									data:{
										'mode':11,
										'record':jQuery("#text_new").val(),
										//jsp
										'labname':'<%=cilab.getName()%>',
									},
									success:function(message){
										console.log(message);
										eval("message="+message);
										
										if(message['state'] == '1'){
											alert('新增成功');
											jQuery("#no_new").click();
										}else{
											alert("请求已发送，但执行出现问题");
										}
									},
									error:function(message){
										console.log(message);
										console.log("adderror:服务器访问异常"+message);
									}
								});
							});
						});
					</script>
				</div>
				<!--errorcontent-->
			</div>
			<!--errorwrapper-->
		</div>

	</div>


	<!--bodywrapper-->
</body>
</html>
